<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { defineProps } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';
import { useRoute } from 'vue-router';
import { obsClient } from '@/utils/obs';

const props = defineProps({
  post: Object,
});
const route = useRoute();

const Post = ref({});

// 在组件挂载时更新 Post 对象
onMounted(() => {
  Post.value = {
    postId: props?.post?.postId,
    userId: props?.post?.userId,
    username: props?.post?.username,
    time: props?.post?.time,
    content: props?.post?.content,
    imgKey: props?.post?.imgKey,
    isShared: props?.post?.isShared,
    shareId: props?.post?.shareId, 
    shareChain: props?.post?.shareChain,
    likesCount: props?.post?.likesCount,
    commentsCount: props?.post?.commentsCount,
    sharesCount: props?.post?.sharesCount,
    comments: props?.post?.comments
  };
});

const toThisPost = () => {
    router.push({
    path: "/post",
      query: {
        userId: props?.post?.userId,
        postId: props?.post?.postId,
      }
    });
}

// 根据图片索引和总数来动态设置样式（完成）
const getImageStyle = (index) => {
  if (props?.post?.imgKey.length === 1) {
    return { width: '99%', height: '300px' };
  } else if(props?.post?.imgKey.length === 2 ) {
    return { width: '48.2%', height: '300px' };
  } else if(props?.post?.imgKey.length === 3 ) {
    return { width: '32%', height: '200px' };
  } else if(props?.post?.imgKey.length === 4){ 
    return { width: '48.2%', height: '170px' };
  } else if(props?.post?.imgKey.length === 6 || props?.post?.imgKey.length === 9){ 
    return { width: '32%', height: '150px'};
  } else if(props?.post?.imgKey.length === 7){
    if(index === 0 ) return { width: '99%', height: '200px' };
    else return { width: '32%', height: '150px' };
  } else if(props?.post?.imgKey.length === 5 || props?.post?.imgKey.length === 8){
    if(index === 0 || index === 1 ) return { width: '48.2%', height: '200px' };
    else return { width: '32%', height: '150px' };
  }      
}

// 构建完整的图片 URL
const getFullImageUrl = (pic: string) => {
  return `https://job-linker.obs.cn-north-4.myhuaweicloud.com/${pic}`;
};

// 获取预览图片列表
const getPreviewSrcList = () => {
  return props.post.imgKey.map(pic => getFullImageUrl(pic));
};
</script>
<template>
    <div class="unit-card" v-if="!props?.post?.isDelete">
      <!-- 文字 -->
      <p class="content-text" @click.stop="toThisPost">
        <span >{{ props?.post?.content }}</span> 
          <span v-for="(share, index) in props?.post?.shareChain" :key="index">
            <span v-if="index < props?.post?.shareChain.length - 1">
            <span class="slashes" > // </span>{{ share.content }} 
          </span>  
        </span>
      </p>
      <!-- 图片 -->
      <div class="img-gallery" v-if="props?.post?.imgKey&& props?.post?.imgKey.length > 0">
        <div class="demo-image__preview">
          <el-image
            v-for="(pic, index) in props?.post?.imgKey" 
            :class="{ 'img': true, 'small-img': props?.post?.imgKey.length > 3 }"
            :style="getImageStyle(index)"
            :key="index"
            :src="getFullImageUrl(pic)"
            :preview-src-list="getPreviewSrcList()"
            fit="cover"
            @click.stop
          />
        </div>
      </div>
    </div> 
    <!-- 内容被删除 -->
      <div class="unit-card" v-else>
        <p class="content-text">内容已删除</p>
      </div>
</template>
<style scoped>
.slashes{
  font-family: Arial, sans-serif;
  color: var(--color-primary);
  padding-left: 5px;
  padding-right: 5px;
}
.img-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.img {
  border-radius: 4px;
  margin: 2.5px;
  transition: transform 0.2s ease;
  cursor: pointer;
}


.small-img {
  width: 24%; /* 四张或更多图片时使用较小的布局 */
}

/* 根据需要添加媒体查询，以适应不同屏幕尺寸 */
@media (max-width: 600px) {
  .small-img {
    width: 49%; /* 在小屏幕上，使用两列布局 */
  }
}
.content {
  margin: 12px 0; 
}
.content-text {
  text-align: left; 
  margin-left: 10px;
  font-size: 1em;
  white-space: normal; 
  overflow-wrap: break-word; /* 同 word-wrap，是更现代的属性 */
}
.image__error .img-slot {
  font-size: 30px;
}
.image__error .img-slot .el-icon {
  font-size: 30px;
}
.image__error .el-image {
  width: 100%;
  height: 200px;
}

</style>